<template>
  <div class="home">
    <el-container style="height:100%">
      <el-header>
        <div class="header">
          <span class="title">
            法考训练综合平台
          </span>
          <div class="end">
            <img :src="imageUrl" alt="">
            <span class="usename">{{name}}</span>
            <el-dropdown>
              <span class="el-dropdown-link">
                {{nu.nickname}} 欢迎你<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="toinfo">个人信息</el-dropdown-item>
                <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
                <el-dropdown-item @click.native="dialogVisible=true">修改密码</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          router
          @close="handleClose">
          <el-menu-item index="/test" v-if="role==0">
            <i class="el-icon-document-copy"></i>
            <span slot="title">智能组卷</span>
          </el-menu-item>
          <el-menu-item index="/history" v-if="role==0">
            <i class="el-icon-document"></i>
            <span slot="title">历年真题</span>
          </el-menu-item>
          <el-menu-item index="/card" v-if="role==0">
            <i class="el-icon-money"></i>
            <span slot="title">背诵卡片</span>
          </el-menu-item>
          <el-menu-item index="/userDetail" v-if="role==0">
            <i class="el-icon-setting"></i>
            <span slot="title">用户信息</span>
          </el-menu-item>
          <el-menu-item index="/paperManage" v-if="role==1">
            <i class="el-icon-setting"></i>
            <span slot="title">试卷管理</span>
          </el-menu-item>
          <el-menu-item index="/scoreManage" v-if="role==1">
            <i class="el-icon-setting"></i>
            <span slot="title">成绩查看</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
    
    </el-container>
    <el-dialog
      title="修改密码"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>密码</span>
      
      <el-input v-model="form.pass"></el-input>
      <br/>
      <span>确认密码</span>
      <br/>
      <el-input v-model="form.passconfirm"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitPass">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'home',
  data(){
    return{
      name:'',
      imageUrl:require('../assets/img/yonghu.png'),
      list:[],
      activeIndex:'',
      form:{
        pass:'',
        passconfirm:''
      },
      dialogVisible: false
    }
  },
  computed:{
    nu(){
      return this.$gl('nowUser')
    },
    role(){
      console.log(this.$gl('role'));
      return this.$gl('role')
    }
  },
  watch:{
    nu:{
      handler(newv){
        if (newv.imgurl)this.imageUrl = newv.imgurl
      },
      deep:true
    }
  },
  components: {

  },
  mounted(){
    let nu = this.$gl('nowUser')
   if (nu.imgurl)this.imageUrl = nu.imgurl
  },
  methods:{
    submitPass(){
      if(this.form.pass != this.form.passconfirm) {
        this.$message.error('两次密码不相符')
        return
      }else if(this.form.pass == '' || this.form.passconfirm == ''){
        this.$message.error('密码不能为空')
        
        return
      }
      this.$http.rePass({
        account:this.$gl('nowUser').account,
        password:this.form.pass
      }).then(res=>{
        console.log(res);
        if(res.data.data){

          this.$message.success('修改成功')
        }else{
          this.$message.error('修改失败')
        }
          this.dialogVisible = false
      })
      // let user =this.$gl('userInfo')
      //   let user2 = this.$gl('userInfo')
      //   let nu = this.$gl('nowUser')
      //   nu.password = this.form.pass
      //   this.$sl('nowUser',nu),
      //   user.forEach((item,index)=>{
      //     if(item.account==nu.account){
      //       user2[index] = nu
      //     }
      //   })
      //   this.$sl('userInfo',user2)
      //    this.form={
      //       pass:'',
      //       passconfirm:''
      //     }
        
    },
    handleClose(){
      this.form={
        pass:'',
        passconfirm:''
      }
    },
    toinfo(){
      this.$router.push('/userDetail')
    },
    handleOpen(key, keyPath) {
        console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    logout(){
      console.log(1)
      localStorage.setItem('islogin',0)
      this.$router.replace('/login')
    }
  }
}
</script>
<style lang="less" scoped>
.home{
  width: 100%;
  height: 100%;
}
.el-dropdown-link {
  cursor: pointer;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #F8F7FB;
  line-height: 22px;
  margin-right: 5px;
}
/deep/ .el-header,.el-aside{
  padding: 0;
  background-color: #fff;
}
.header{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  // box-sizing: border-box;
  background: #0091FF;
  .title{
    font-size: 20px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 28px;
  }
  .end{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    img{
      width: 34px;
      height: 34px;
      margin-right: 5px;
    }
    .username{
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #F8F7FB;
      line-height: 22px;
    }
  }
}
</style>